<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>八卦</title>
  <style>
    body {
      background: #eeeeee;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    @keyframes x {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    #Bagua-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100vh;
      /* viewpoint height */
    }

    #Bagua {
      position: relative;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      overflow: hidden;
      animation: x 10s infinite linear;
      box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.75);
    }

    @media (max-width: 500px) {
      #Bagua {
        width: 200px;
        height: 200px;
      }
    }

    #Bagua>div:first-child {
      position: absolute;
      left: 0;
      width: 50%;
      height: 100%;
      background: black;
    }

    #Bagua>div:nth-child(2) {
      position: absolute;
      right: 0;
      height: 100%;
      width: 50%;
      background: white;
    }

    #Bagua>div:nth-child(3) {
      /* border: 10px solid red; */
      position: absolute;
      left: 50%;
      width: 200px;
      height: 200px;
      margin-left: -100px;
      border-radius: 50%;
      background: black;
    }

    @media (max-width: 500px) {
      #Bagua>div:nth-child(3) {
        width: 100px;
        height: 100px;
        margin-left: -50px;
      }
    }

    #Bagua>div:nth-child(4) {
      position: absolute;
      left: 50%;
      bottom: 0;
      margin-left: -100px;
      background: white;
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }

    @media (max-width: 500px) {
      #Bagua>div:nth-child(4) {
        margin-left: -50px;
        width: 100px;
        height: 100px;
      }
    }

    #Bagua>div:nth-child(5) {
      position: absolute;
      left: 50%;
      top: 75px;
      margin-left: -25px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: white;
    }

    @media (max-width: 500px) {
      #Bagua>div:nth-child(5) {
        top: 37.5px;
        margin-left: -12.5px;
        width: 25px;
        height: 25px;
      }
    }

    #Bagua>div:nth-child(6) {
      position: absolute;
      left: 50%;
      bottom: 75px;
      margin-left: -25px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: black;
    }

    @media (max-width: 500px) {
      #Bagua>div:nth-child(6) {
        bottom: 37.5px;
        margin-left: -12.5px;
        width: 25px;
        height: 25px;
      }
    }

    #Bagua-direction {
      margin-top: 1em;
    }
  </style>
</head>

<body>
  <div id="Bagua-wrapper">
    <div id="Bagua">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div id="Bagua-direction"> 道可道，非常道</div>
  </div>
</body>

</html>